<template>
    <div>
        <a-modal title="生成路标任务" centered v-model:visible="visible" :width="600" @cancel="handleCancel">
            <a-form ref="ruleFormRef" layout="inline" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="执行时间" v-if="visible" name="executeDate">
                            <div>
                                <HDatePickerCell v-model:value="form.executeDate" :disabledDate="false" />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <template #footer>
                <a-button type="primary" @click="handleOk">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import { deepClone } from '@/utils/util';
import { HDatePickerCell } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref, nextTick } from 'vue';
export default defineComponent({
    components: {
        HDatePickerCell
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                executeDate: ''
            },
            visible: false
        });
        const rules = {
            executeDate: [{ required: true, message: '执行时间不能为空', trigger: 'blur' }]
        };
        const handleReset = () => {
            state.form = {
                executeDate: ''
            };
        };
        const open = (list) => {
            state.list = deepClone(list);
            handleReset();
            state.visible = true;
            nextTick(() => {
                unref(ruleFormRef) && unref(ruleFormRef).clearValidate();
            });
        };
        const handleSave = async () => {
            let catalogCode = null;
            if (state.list.length) {
                catalogCode = state.list.map((item) => item.catalogCode).join(',');
            }
            const formData: any = new FormData();
            formData.append('executeDate', state.form.executeDate);
            formData.append('catalogCode', catalogCode);
            const { success } = await api.signpostModel.generateSignpost(formData);
            if (success) {
                emit('success');
                message.success('生成成功');
                handleCancel();
            }
        };
        const handleOk = async () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    handleSave();
                });
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            open,
            handleOk,
            handleCancel
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-form-item-label-left) {
    min-width: 0 !important;
}
</style>